// ----------==== animation 
  @keyframes fade-in{
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }
  @keyframes fade-out{
    from{
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .fade-in{
    animation:fade-in .3s ease;
    animation-fill-mode: forwards;
  }
  .fade-out{
    animation:fade-out .3s ease;
    animation-fill-mode: forwards;
  }
// ----------
@keyframes sway-up-down {
  from{
    transform:translateY(-5px)
  }
  to{
    transform:translateY(5px)
  }
}